<template>
	<view class="home-content">
		<!-- 搜索部分 -->
		<NavBar></NavBar>
		<!-- 导航栏区域 -->
		<TabBar @active="acitve" :activeIndex="activeIndex" :list="selfLabelList"></TabBar>
		<!-- 文章内容区域 -->
		<ArticleList class="list-contanier" @activeIndex="acitve" :current="activeIndex" :navList="selfLabelList"></ArticleList>
	</view>
</template>

<script>
import {mapState,mapMutations}  from 'vuex'
export default {
	data() {
		return {
			title: 'Hello',
			activeIndex: 0
		}
	},
	async onLoad() {
		this._inirNavlist()
	},
	methods: {
		async _inirNavlist() {
			if(!this.selfLabelList.length) {
				const data = await this.$http.getList()
				this.setLabelList([{name:'全部'}, ...data])
			}
		},
		acitve(i) {
			this.activeIndex = i
		},
		...mapMutations(['setLabelList'])
	},
	computed: {
		selfLabelList(){
			// 用户是否存在的个性化标签卡显示
			if(this.userInfo){
				this.acitveIndex = 0
				if(this.userInfo.label_ids){
					return [...this.$store.state.labelList.slice(0,1),
					...this.$store.state.labelList.filter(item => this.userInfo.label_ids.includes(item._id))
					]
				}
				return this.$store.state.labelList
			}
			return this.$store.state.labelList
		},
	}
}
</script>

<style lang="scss">
page{
	display: flex;
	height: 100%;
}
.home-content{
	flex: 1;
	overflow: hidden;
	box-sizing: border-box;
	@include flex(flex-start,column);
	align-items: inherit;
}
.list-contanier{
	flex: 1;
	box-sizing: border-box;
}
</style>
